<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运动饮食系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../images/css/snow.css" rel="stylesheet" type="text/css" media="all" />
<link href="../images/css/style2.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body,td,th {
	font-size: 0.28em;
}
-->
</style></head>
<body>
<div id="app">
<div class="snow-container"  >
			  <div class="snow foreground"></div>
			  <div class="snow foreground layered"></div>
			  <div class="snow middleground"></div>
			  <div class="snow middleground layered"></div>
			  <div class="snow background"></div>
			  <div class="snow background layered"></div>
			</div>
<div class="top-buttons-agileinfo">
<!--<a href="index.html"  class="active">登录</a><a href="signup.html">注册</a>-->
</div>
<br>
<br>
<h1>运动饮食系统</h1>
<div class="main-agileits">
		<div class="form-w3-agile">
			<h2 class="sub-agileits-w3layouts">登录系统</h2>
			 <form name="form1"  class="form-validate mb-4"> 
					<input type="text" name="username" placeholder="UserName" required="" id="username" v-model="user.username"/>
					<input type="password" name="pwd" placeholder="Password" required="" id="pwd" v-model="user.mima" />
					 <select name="cx" id="cx"  style="width:100%; height:50px; " v-model="user.level">
            <option value="管理员" name="level">管理员</option>

            </select>
			<table>
			  <tr><td><input type="text" name="yzm" placeholder="验证码" required="" id="yzm"  /></td><td valign="bottom">
			  <input type = "text"  id="code"  style="cursor:pointer; width:100px; height:40px; padding-top:10px;"/>   </td>
			</tr></table>
			
				<div class="submit-w3l">
                    <input type="button" value="登录"  @click="login">
				</div>
			</form>
		</div>
		</div>
    <div class="copyright w3-agile">
        <p> @ <script>document.write(new Date().getFullYear());</script>  . All rights reserved | Design By 运动饮食系统</p>
    </div>
</div>
<script src="../js/hsgyanzhengma.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script>
	new Vue({
		el: "#app",
		data: {
			user: {
				username: "",
				mima: "",
				level: null
			},
			authorities: [],
		},
		created: function () {
			axios.get("/getAuthority").then(res => {
				if (res.data.code === '0') {
					this.authorities = res.data.data;
				} else {
					alert(res.data.msg);
				}
			});
		},
		methods: {
			login() {
				if (!this.user.username) {
					alert("请输入用户名");
					return;
				}
				if (!this.user.mima) {
					alert("请输入密码");
					return;
				}
				if (!this.user.level) {
					alert("请选择角色");
					return;
				}
				var inputCode = yzm.value.toUpperCase(); //取得输入的验证码并转化为大写??
				if(inputCode.length==0) { //若输入的验证码长度为0
					alert("请输入验证码 "); //则弹出请输入验证码
					return;
				}
				else if(inputCode!=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
					alert("验证码输入错误 请重新输入"); //则弹出验证码输入错误
					change();//刷新验证码
					input.value="";//清空文本框
					return;
				}

				axios.post('/login', this.user).then(res => {
					if(res.data.code === '0') {
						localStorage.setItem('user', JSON.stringify(res.data.data));
						if (this.user.level==="管理员"){window.location = '/end/page/main_admins.html';}


					} else {
						alert(res.data.msg);
					}
				});
			},
		}
	});
</script>

</body>
</html>
